<template>
	<div class="page1">
		<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>系统用户管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--主体内容-->
		<div class="content">
			<TitleModule :title="'用户信息'"></TitleModule>
			<!--搜索条件区域-->
			<div class="searchWrapper">
				<el-row>
				<el-form label-position="right" label-width="100px" :model="formInline" style="" :rules="rules" :ref="'form'">
					<el-col :span="6">
					<el-form-item label="登录名" prop="userName">
						<el-input v-model.trim="formInline.userName"></el-input>
					</el-form-item>
					<el-form-item label="真实姓名" prop="realName">
						<el-input v-model.trim="formInline.realName"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password" v-show="!isEdit">
						<el-input v-model.trim="formInline.password"></el-input>
					</el-form-item>
					<el-form-item label="性别">
						<el-select v-model.trim="formInline.sex" filterable placeholder="">
							<el-option label="男" value="0"></el-option>
							<el-option label="女" value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model.trim="formInline.mobile"></el-input>
					</el-form-item>
					<el-form-item label="邮箱">
						<el-input v-model.trim="formInline.email"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input v-model.trim="formInline.address"></el-input>
					</el-form-item>
					<el-form-item label="用户状态">
						<el-select v-model.trim="formInline.userStatus" filterable placeholder="">
							<el-option label="在职" value="0"></el-option>
							<el-option label="离职" value="1"></el-option>
						</el-select>
					</el-form-item>
					</el-col>
					<el-col :span="6" :offset="6">
					<el-form-item label="区域名称">
						<el-tree :data="treeList" show-checkbox default-expand-all node-key="areaId" :props="defaultProps" :ref="'tree'">
						</el-tree>
					</el-form-item>
					</el-col>
				</el-form>
				</el-row>
				<TitleModule :title="'绑定角色'"></TitleModule>
				<el-checkbox-group v-model.trim="checkList">
					<el-checkbox style="width: 200px; margin-left: 0;" :label="item.roleId" v-for="item in userList" :key="item.roleId">{{item.roleName}}</el-checkbox>
				</el-checkbox-group>
				<div style="text-align: center; margin-top: 20px; ">
					<el-button type="primary" @click="submitData" style="width: 88px;">提交</el-button>
					<el-button type="" @click="$router.replace({path: '/userManage'})" style="width: 88px;">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getData
	} from '../../common/js/public.js'
	import TitleModule from '../../components/titleModule/titleModule'
	export default {
		name: 'hello',
		data () {
			return {
				isEdit: false,
				checkList: [],
				userList: [],
				treeList: [],
				areaList: [],
				defaultProps: {
					children: 'children',
					label: 'areaName'
				},
				formInline: {
					realName: '',
					userName: '',
					sex: '0',
					userStatus: '0',
					address: '',
					mobile: '',
					email: '',
					userId: ''
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入登录名',
						trigger: 'blur'
					}],
					realName: [{
						required: true,
						message: '请输入真实姓名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			getUser () {
				let opt = {
					url: '/gplus/role/queryList',
					data: {
						"applicationPlatform": "0"
					},
					success: (res) => {
						this.userList = res.data.RoleVO;
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			getArea () {
				let opt = {
					url: '/gplus/area/queryList',
					data: {},
					success: (res) => {
						this.areaList = res.data.AreaVO;
						this.treeList = this.formatTree();
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			submitData () {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						if (!this.checkList.length) {
							this.$alert('请绑定角色！！', '提示', {
									confirmButtonText: '确定'
							});
							return false;
						}
						this.formInline.userCode = this.formInline.userName;
						this.formInline.areaIds = this.$refs['tree'].getCheckedKeys().toString();
						if (this.isEdit) {
							this.delUserRole();
						} else {
							this.addList();
						}						
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			formatTree () {
				let areaList = this.areaList.slice(0);
				let list = [];
				for (let i in areaList) {
					for (let j in areaList) {
						if (areaList[j].parentId == areaList[i].areaId) {
							areaList[i].children ? areaList[i].children.push(areaList[j]) : areaList[i].children = [ areaList[j] ];
						}
					}
					if (!areaList[i].parentId) {
						list.push(areaList[i]);
					};
				}
				return list;
			},
			addList () {
				let opt = {
					url: !this.isEdit ? '/gplus/user/add' : '/gplus/user/update',
					data: this.formInline,
					success: (res) => {
						let userId = res.data.UserVO.userId;
						this.addRoleList(userId);
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			queryDetail () {				
				let opt = {
					url: '/gplus/user/queryDetail',
					data: {
						"userId": this.$route.query.userId
					},
					success: (res) => {
						this.queryUserRole();
						for (let i in this.formInline) {							
							this.formInline[i] = res.data.UserVO[i].toString();
						}
						this.$refs.tree.setCheckedKeys(res.data.AreaIds);
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			queryUserRole () {
				let opt = {
					url: '/gplus/role/queryUserRoleList',
					data: {
						"userId": this.$route.query.userId
					},
					success: (res) => {
						let arr = res.data.RoleVO;
						for (let i = 0; i < arr.length; i++) {							
							this.checkList.push(arr[i].roleId);
						}
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			delUserRole () {
				let opt = {
					url: '/gplus/userrole/deleteByUserID',
					data: {
						"userId": this.$route.query.userId
					},
					success: (res) => {
						this.addList();
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			addRoleList (userId) {	
				let arr = [];
				for (let i = 0; i < this.checkList.length; i++) {
					let obj = {
						"userId": userId,
						"roleId": this.checkList[i]
					};
					arr.push(obj);
				}
				let opt = {
					url: '/gplus/userrole/addList',
					data: arr,
					success: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						}).then(() => {							
							this.$router.go(-1);
						});
					},
					fail: (res) => {
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			}
		},
		components: {
			TitleModule
		},
		created () {
			this.getUser();
			this.getArea();
		},
		mounted () {
			if (this.$route.query.userId) {		
				this.isEdit = true;
				this.queryDetail();
			}
		},		
		computed: {
		}
	}
</script>	
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.breadcrumb 
	height: 30px;
	overflow: hidden;	
.content	
	background: #FFFFFF;
	overflow: hidden;
	border: 1px solid #C0CCDA;
	border-radius: 4px;
	padding: 20px;
</style>
